<script setup>
import { onBeforeMount, onMounted, ref, watch } from "vue";
import * as echarts from "echarts";
import { theme } from "../assets/js/theme.js";

const props = defineProps(["pieData"]);
const emit = defineEmits([]);

var app = {};

var myChart;
const cellSize = [(window.innerWidth * 0.43) / 7 , 78]; // 高度固定，不用(window.innerHeight * 0.54) / 5
const pieRadius = cellSize[0]  * 7 / 22 ;
let pieCounts = props.pieData.length;
var scatterData;
var option = {
  title: {
    text: "各省化石燃料使用情况",
    subtext: "Unit: Mt CO2",
    top: "1%",
    left: "15%",
  },
  tooltip: {
    trigger: "item",
    formatter: (params) => {
      // console.log("aaaaaaaaaaaaaa", params);
      return (
        '<span style="display:inline-block;">' +
        params.marker +
        " " +
        params.name +
        "&nbsp;&nbsp;" +
        params.value
      );
    },
  },
  legend: {
    top: "8%",
    right: "32%",
    // width: "25%",
    itemGap: 7,
  },
  grid: {
    top: 0,
    borderWidth: 0,
  },
  calendar: {
    top: 0.2,
    left: "center",
    orient: "vertical",
    cellSize: cellSize,
    itemStyle: {
      // borderWidth: 0,
      color: "rgba(254,248,239,1)",
    },
    splitStyle: {
      show: false,
      lineStyle: {
        width: 0,
      },
    },

    yearLabel: {
      show: false,
      fontSize: 12,
    },
    dayLabel: {
      show: false,
      firstDay: 1,
    },
    monthLabel: {
      show: false,
    },
    range: ["2017-04"],
  },
};

function getVirtulData() {
  let date = +echarts.number.parseDate("2017-04-01");
  let end = +echarts.number.parseDate("2017-05-01");
  let dayTime = 3600 * 24 * 1000;
  let data = [];
  let index = 0;
  for (let time = date; index < pieCounts; time += dayTime, index++) {
    // for (let index = 0; index < pieCounts; ++index) {
    data.push([
      echarts.format.formatTime("yyyy-MM-dd", time),
      props.pieData[index].totalValue,
      props.pieData[index].provinceName,
    ]);
  }

  return data;
}

function getPieSeries(scatterData, chart) {
  return scatterData.map(function (item, index) {
    var center = chart.convertToPixel("calendar", item);
    return {
      id: index + "pie",
      type: "pie",
      center: center,
      top: 8,
      tooltip: {
        show: true,
      },
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 8,
        borderColor: "#fff",
        borderWidth: 2,
      },
      label: {
        // show: false,
        formatter: "{c}",
        position: "inside",
      },
      radius: pieRadius,
      data: props.pieData[index].value,
    };
  });
}

watch(
  () => props.pieData,
  (newData, oldData) => {
    pieCounts = props.pieData.length;
    scatterData = getVirtulData();

    myChart.setOption(option, true); // 覆盖原来的option
    myChart.setOption({
      series: getPieSeries(scatterData, myChart),
    });
    myChart.setOption({
      series: [
        {
          id: "label",
          type: "scatter",
          coordinateSystem: "calendar",
          symbolSize: 1,
          tooltip: {
            show: true,
            formatter: (params) => {
              return (
                '<span style="display:inline-block;">' +
                params.value[2] +
                "&nbsp;&nbsp;" +
                params.value[1] +
                "</span >"
              );
            },
          },
          label: {
            show: true,
            formatter: function (params) {
              return params.value[2];
            },
            offset: [-cellSize[0] / 2 + 47, -cellSize[1] / 2 + 9],
            fontSize: 11,
          },
          data: scatterData,
        },
      ],
    });
  },
  { deep: true },
  { immediate: true }
);

onMounted(() => {
  myChart = echarts.init(document.getElementById("allProvincePie"), theme);
  myChart.setOption(option);

  // console.log("cellSize", cellSize)
});
</script>

<template>
  <div class="module">
    <div id="allProvincePie"></div>
  </div>
</template>

<style lang="scss" scoped>
.module {
  height: 7.35rem;
  // border: 1px red solid;
  margin: 0.04rem;
}
#allProvincePie {
  width: 100%;
  height: 100%;
}
</style>
